<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .brod-r {
            border-right: 1px solid #E4DEDE;
        }

        .center {
            line-height: 120px;
            text-align: center;
        }

        .m-left {
            margin-left: 35px;
        }

        .top {
            padding: 25px 0;
        }

        .top-box {
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            background-color: #0AA1ED;
        }

        .address-choice {
            margin-bottom: 30px;
        }

        .adr-top,
        .pro-top {
            height: 33px;
            font-size: 19px;
            font-weight: 700;
            border-bottom: 1px solid #BBBBBB;
        }

        .adr-body {
            height: 52px;
            line-height: 48px;
            /* padding: 1px; */
            border: 2px solid #BBBBBB;
            border-radius: 5px;
            margin: 10px 0;
        }

        .adr-body li {
            float: left;
        }

        .radio-w {
            width: 70px;
            text-align: center;
            /* border-right: 1px solid #bbbbbb; */
        }

        .name-w {
            width: 170px;
            text-align: center;
            background-color: #0AA1ED;
        }

        .adr-view {
            padding-left: 15px;
        }

        .body-top {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .body-top li {
            background-color: #E8E8E8;
        }

        .pro-body {
            margin-top: 20px;
        }

        .pro-body li {
            height: 120px;
            background-color: #fff;
        }

        .pro-body img {
            float: right;
            height: 120px;
            width: 120px;
        }

        .sole-title,
        .soler {
            height: 60px;
            overflow: hidden;
        }

        .pro-foot {
            margin-top: 30px;
            padding-left: 0;
            padding-right: 30px;
        }

        .foot-box {
            height: 50px;
            background-color: #E8E8E8;
        }

        .foot-box a {
            margin-left: 10px;
            line-height: 50px;
        }

        .foot-box span {
            float: right;
            line-height: 50px;
            margin-right: 20px;
        }

        .foot-box b {
            color: red;
        }

        .foot-button {
            height: 50px;
            background-color: #E8E8E8;
        }

        .button {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
        }

        .huise {
            background-color: #B6C0C5;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="container">
    <div class="row">
        <div class="top">
            <div class="top-box m-left">
                确认订单信息
            </div>
        </div>
    </div>
    <div class="row">
        <div class="address-choice m-left">
            <div class="adr-top">选择收货地址</div>
            <div class="adr-body">
                <ul>
                    <li class="radio-w">
                        <span> 默认地址</span>
                    </li>
                    <li class="name-w" th:text="${address.userName}" id="consignee">张三</li>
                    <li class="adr-view"><span th:text="${address.address}" id="address">北京市 海淀区 大钟寺123号</span> <span
                            class="huise"
                            id="phone" th:text="${address.phone}">13566779988</span>
                    </li>
                </ul>
            </div>
            <div><a href="useraddress.html" th:href="@{/User/useraddress}">改变默认地址</a></div>
        </div>
    </div>
    <div class="row">
        <div class="address-choice m-left">
            <div class="adr-top">选择交易方式</div>
            <input type="radio" name="deal" value="当面交易" checked><span>当面交易</span>
            <input type="radio" name="deal" value="快递"><span>快递</span>
        </div>
    </div>
    <div class="row">
        <div class="pro-top m-left">确认商品信息(3分钟后失效)</div>
        <div class="body-top m-left">
            <ul>
                <li class="col-md-4">商品信息</li>
                <li class="col-md-2">创建时间</li>
                <li class="col-md-2">数量</li>
                <li class="col-md-2">总额</li>
                <li class="col-md-2">删除</li>
            </ul>
        </div>
        <div class="m-left pro-body" th:each="order:${orderList}">
            <ul>
                <li class="col-md-4 brod-r">
                    <div class="col-md-4">
                        <img src="assets\images\products\p1.jpg" th:src="@{${order.goodsPicture}}">
                    </div>
                    <div class="col-md-8">
                        <div class="sole-title" th:text="${order.goodsName}">java基础</div>
                        <div class="soler">商家:<span th:text="${order.storeName}">xxxxxxxx</span></div>
                    </div>
                </li>
                <li class="col-md-2 brod-r center" th:text="${order.createTime}">xxx年</li>
                <li class="col-md-2 brod-r center count" th:text="${order.count}">1</li>
                <li class="col-md-2 center">￥<span class="payPrice" th:text="${order.price}">108.00</span></li>
                <li class="col-md-2 center"><a href="#" class="delete" th:id="${order.orderId}">删除</a></li>
            </ul>
        </div>
        <div class="row">
            <div class="pro-foot col-md-12 m-left">
                <div class="foot-box col-md-10">
                    <a href="usercart.html" th:href="@{/User/usercart}"> 返回购物车</a>
                    <span>合计:￥<b id="allPrice">10086.00</b></span>
                    <span>包含<b id="num">1</b>件商品</span>
                </div>
                <div class="col-md-2 foot-button">
                    <div class="button">
                        <a href="#" id="submit">确认购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="bower_components/jquery/dist/jquery.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script>
    function allPrice() {
        let price = 0;
        let number = 0;
        $(".payPrice").each(function () {
            price += Number($(this).text());
            number += Number($(this).parent().siblings(".count").html());
            // console.log($(this).text());
            // console.log(number);
        });
        $("#allPrice").text(price);
        $("#num").text(number);
    }

    $(document).ready(function () {
        allPrice();

        $(".delete").click(function () {
            let orderID = $(this).attr("id");
            $(this).parent().parent().remove();
            allPrice();
            $.post("/User/deleteOrder/data", {orderID: orderID}, function (data) {
                console.log(data);
            });
        });

        $("#submit").click(function () {
            let way = $('input:radio:checked').val();
            let persion = $("#consignee").text();
            let address = $("#address").text();
            let phone = $("#phone").text();
            console.log(way);
            $.post("/User/updateOrder/data", {
                way: way,
                persion: persion,
                address: address,
                phone: phone
            }, function (data) {
                console.log(data);
                if (data == "yes")
                    window.location.href = "/User/successOrder";
            });
        })
    });
</script>

</html>